<template>
  <div class="page">
    <!-- 导航栏 -->
    <van-nav-bar
      title="我的活动"
      left-text="返回"
      left-arrow
      @click-left="goBack"
    ></van-nav-bar>

    <!-- 活动列表 -->
    <div class="event-list">
      <van-cell
        v-for="event in events"
        :key="event.id"
        @click="goToDetail(event.id)"
      >
        <div class="event-item">
          <h3 class="event-name">{{ event.name }}</h3>
          <img
            v-if="
              event.pics && Array.isArray(event.pics) && event.pics.length > 0
            "
            :src="event.pics[0]"
            alt="活动图片"
            class="event-image"
          />
          <div class="event-info">
            <p class="event-location">{{ event.location }}</p>
            <div class="event-time">
              <p>{{ formatDate(event.startTime) }}</p>
              <p>{{ formatDate(event.endTime) }}</p>
            </div>
          </div>
        </div>
      </van-cell>
    </div>
  </div>
</template>
  
  <script>
import userProfileApi from "@/api/userProfile.js";
import { Toast } from "vant";

export default {
  data() {
    return {
      events: [],
    };
  },
  created() {
    this.loadEvents();
  },
  methods: {
    parsePics(pics) {
      if (typeof pics === "string") {
        // 去掉最外层的双引号
        pics = pics.replace(/^"(.*)"$/, "$1");
        try {
          const picsArray = JSON.parse(pics);
          return picsArray;
        } catch (error) {
          console.error("Error parsing pics string:", error);
          return [];
        }
      } else if (Array.isArray(pics)) {
        return pics;
      } else {
        return [];
      }
    },

    async loadEvents() {
      try {
        const res = await userProfileApi.getMyEvents();
        console.log(res);
        this.events = res.map((event) => {
          const parsedPics = this.parsePics(event.pics);
          console.log("Parsed pics for event", event.id, parsedPics);
          return {
            ...event,
            pics: parsedPics,
          };
        });
      } catch (error) {
        Toast.fail("获取活动列表失败");
      }
    },

    // 格式化时间
    formatDate(dateTime) {
      return new Date(dateTime).toLocaleString(); // 格式化日期
    },

    // 返回上一页
    goBack() {
      this.$router.go(-1); // 返回上一页
    },

    // 跳转到活动详情页
    goToDetail(id) {
      this.$router.push({
        path: "/eventDetail",
        query: {
          id: id,
          role: "user", // 或 'organizer'，根据角色动态设置
        },
      });
    },
  },
};
</script>
  
  <style scoped>
.van-nav-bar {
  background-color: #1989fa; /* 设置导航栏背景为蓝色 */
  color: #ffffff; /* 设置文字颜色为白色 */
}
.van-nav-bar ::v-deep .van-nav-bar__text,
.van-nav-bar ::v-deep .van-nav-bar__title {
  color: white !important;
}

.van-nav-bar ::v-deep .van-nav-bar__arrow {
  color: white !important;
}
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f8f9fa;
}

.event-list {
  flex: 1;
  overflow-y: auto;
  padding: 1vw; /* 给整个列表增加一些内边距 */
}

.event-item {
  display: flex;
  flex-direction: column; /* 纵向排列 */
  padding: 2vh 1.5vw; /* 增加内边距，使内容更舒适 */
  margin-bottom: 2vh; /* 增加单元之间的间距 */
  border-radius: 1vh; /* 圆角边框 */
  border: 1px solid #e0e0e0; /* 轻微的边框 */
  background-color: #f9f9f9; /* 背景色，轻微的灰色 */
  box-shadow: 0 1vh 3vh rgba(0, 0, 0, 0.1); /* 阴影效果，给单元立体感 */
}

.event-name {
  font-size: 2.5vh;
  font-weight: bold;
  margin-bottom: 1.2vh;
  text-align: center;
  color: #333; /* 标题文字颜色 */
}

.event-image {
  width: auto;
  height: 20vh; /* 高度为20vh，宽度自动等比例缩放 */
  max-width: 100%; /* 保证图片不超出容器 */
  object-fit: contain; /* 等比例缩放图片，保持图片内容 */
  margin: 1vh auto; /* 上下间距1vh，左右居中 */
  display: block; /* 使图片在容器中居中 */
}

.event-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1vh;
}

.event-location {
  color: #1989fa; /* 蓝色，与返回按钮一致 */
  font-size: 1.8vh; /* 地点文字大小响应式 */
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; /* 超出部分省略 */
  padding-left: 1vh;
}

.event-time {
  text-align: right; /* 右对齐 */
  font-size: 1.6vh; /* 时间文字大小响应式 */
  color: #888; /* 浅色 */
  padding-right: 1vh;
}

.event-time p {
  margin: 0;
  line-height: 1.6; /* 行高 */
}
</style>
  